<template>
  <common-edit-dialog
    :title="title"
    :visible.sync="open"
    @cancel="cancel"
    @submit="submitForm"
    :buttonLoading="buttonLoading"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="110px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务系统编码" prop="operationCode">
            <common-input
              v-model="form.operationCode"
              :maxlength="32"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="业务系统名称" prop="operationName">
            <common-input
              v-model="form.operationName"
              :maxlength="50"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="主机ID" prop="hostId">
            <common-input v-model="form.hostId" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="主机名称" prop="hostName">
            <common-input
              v-model="form.hostName"
              :maxlength="20"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="IP" prop="ip" class="business-ip">
            <common-input v-model="form.ip" placeholder="支持IPV4/IPV6格式" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="MAC地址" prop="mac">
            <common-input v-model="form.mac" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="子网掩码" prop="netmask">
            <common-input v-model="form.netmask" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="端口" prop="exposePort">
            <common-input
              v-model="form.exposePort"
              :verify="false"
              :maxlength="100"
              placeholder="多个端口，用逗号分隔"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <common-add-dept
            ref="commonAddDept"
            :deptListParams="deptListParams"
            @getCheckedDeptId="getCheckedDeptId"
            :deptId="form.deptId"
          ></common-add-dept>
        </el-col>

        <el-col :span="24">
          <el-form-item label="描述" prop="operationContent">
            <common-input
              v-model="form.operationContent"
              type="textarea"
              :maxlength="1024"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import {
  businessAdd,
  businessEdit,
} from "@/api/datascan/businessSystem/index.js";
import { validateIPOrNull } from "@/utils/formValidates";
export default {
  props: {
    deptListParams: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      buttonLoading: false,
      title: "",
      open: false,
      rules: {
        operationCode: [
          { required: true, message: "请输入业务系统编码", trigger: "blur" },
        ],
        operationName: [
          { required: true, message: "请输入业务系统名称", trigger: "blur" },
        ],
        ip: [
          {
            required: true,
            message: "请输入正确的IP地址",
            validator: validateIPOrNull,
            trigger: "blur",
          },
        ],
      },
      form: {
        operationCode: "",
        operationName: "",
        operationContent: "",
        hostId: "",
        hostName: "",
        ip: "",
        mac: "",
        netmask: "",
        exposePort: "",
        deptId: "",
      },
    };
  },
  methods: {
    show(data) {
      this.open = true;
      this.title = data.id ? "编辑业务系统" : "新增业务系统";
      this.form = data.id ? data : this.$options.data().form;
    },

    getCheckedDeptId(val) {
      this.form.deptId = val;
    },

    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let port = this.form.exposePort && this.form.exposePort.split(",");
          if (port && port.length > 0) {
            port = port.filter((item) => item !== "");
            port = [...new Set(port)];
            this.form.exposePort = port.join();
          }

          this.buttonLoading = true;
          if (this.form.id) {
            businessEdit({
              id: this.form.id,
              operationCode: this.form.operationCode,
              operationName: this.form.operationName,
              operationContent: this.form.operationContent,
              hostId: this.form.hostId,
              hostName: this.form.hostName,
              ip: this.form.ip,
              mac: this.form.mac,
              netmask: this.form.netmask,
              exposePort: this.form.exposePort,
              deptId: this.form.deptId,
              status: 1,
            })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("编辑成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            businessAdd(this.form)
              .then((res) => {
                if (res && res.code === 200) {
                  this.$emit("submitForm");
                  this.$GlobalSuccessMessage("保存成功");
                  this.open = false;
                } else {
                  this.$GlobalErrorConfirm("保存失败", res.msg);
                }
              })
              .catch(() => {})
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.business-ip {
  ::v-deep .el-form-item__label:before {
    display: none !important;
  }
}
</style>
